import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html'

import { defineConfig, loadEnv } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { fileURLToPath, URL } from 'node:url'
// import path from "path";
// import AutoImport from 'unplugin-auto-import/vite'
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

const getEnv = (mode: string) => {
  return loadEnv(mode, process.cwd())
}

/* 官方文档 https://vitejs.dev/config/ */
export default defineConfig(({ mode }) => {
  const { VITE_BASEURL, VITE_PROXY_TARGET, VITE_HTML_TITLE } = getEnv(mode)

  return {
    base: VITE_BASEURL, // 公共基础路径
    publicDir: 'public', // 静态资源文件夹
    cacheDir: 'node_modules/.vite', // 存储缓存文件的目录
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
        // "@": path.resolve(process.cwd(), "./src"), // 两种写法均可
      }
    },
    server: {
      // port: 3000, // 固定端口
      open: true,
      https: false,
      proxy: {
        '/api': {
          target: VITE_PROXY_TARGET,
          changeOrigin: true
        }
        // "^/test-api/": {
        //   target: "http://xxx.xxx.xxx",
        //   changeOrigin: true,
        //   rewrite: (path) => path.replace(/^\/test-api/, ""),
        // },
      }
    },
    // optimizeDeps: {
    //   force: true, // 强制进行依赖预构建（在使用npm link时需要打开）
    // },
    plugins: [
      vue(),
      vueJsx(),
      createHtmlPlugin({
        minify: true,
        // 需要注入 index.html ejs 模版的数据
        inject: {
          data: {
            title: VITE_HTML_TITLE
            // injectScript: `<script src="./inject.js"></script>`,
          }
        }
      })
      /* 按需导入el-plus组件（全部引入了，没开启） */
      // AutoImport({
      //   resolvers: [ElementPlusResolver()]
      // }),
      // Components({
      //   resolvers: [ElementPlusResolver()]
      // })
    ],
    build: {
      outDir: 'dist' // 输出文件路径
      // assetsDir: "./assets", // 压缩文件存放路径
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/styles/globalTheme.scss";`
        }
      }
    }
  }
})
